<script lang="ts" setup>
import { reactive, ref, toRaw, onMounted } from 'vue';
import { ElTable, ElMessage,ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
import { queryObject } from"../../service/shopCategoryService";
import publicStore from"../../store/shopCategoryStore"
import { CategoryHook } from "../../hooks/shopCategoryHooks";
import CategoryDialog from "../../components/CategoryDialog.vue"

const pubStore=publicStore();
const CategoryHooks=CategoryHook();

onMounted(()=>{
  CategoryHooks.queryCategory(getQueryData(),getData)
});

const getQueryData=()=>{
  let queryData=toRaw(formInline);
  queryData.limit=limit.value;
  queryData.page=currentPage.value;
  return queryData
}
const search=()=>{
  currentPage.value=1;
  CategoryHooks.queryCategory(getQueryData(),getData)
};

// 将请求的数据赋值给tableData和total
const getData = (data: any, count: number) => {
  tableData.value = data;
  total.value = count;
};

const tableData = ref<Array<any>>([]);

//添加模态框输入
const addForm=reactive<queryObject>({
  name:"",
  serial:"",
  state:""
})
// 清除添加表单值
const clearAdd = () => {
  (addForm.name = ""),(addForm.serial=""),(addForm.state="");
};
// 搜索相关的表单
const formInline = reactive<queryObject>({
  name: null,
  serial:null,
});

const limit = ref<number>(5);
const total = ref<number>(0);
const currentPage = ref<number>(1);

const pageChange=(val:any):void=>{
  console.log("值",val);
  currentPage.value=val;
  CategoryHooks.queryCategory(getQueryData(),getData)
}

//删除
const toDelete= (id: any)=>{
  console.log("id",id);
  currentPage.value=1;
  CategoryHooks.delCategory(id,getQueryData(),getData)
}


//添加模态框
const noDialog=ref(null);
const openUpdate=(e:any,type:number)=>{
  let id;
  if(type==1){
    id=e.currentTarget.dataset.id;
    CategoryHooks.getCategoryById(id,function(data:object){
      Object.assign(addForm,data);
      console.log("addForm",addForm);
    })
  }else{
    addForm.name="";
    addForm.serial="";
    addForm.state=""
  }
  noDialog.value.open();
}
const dialogSubmitType = ref<number>(0);
const insertData=()=>{
  let formData=toRaw(addForm);
  CategoryHooks.AddCategory(formData,getQueryData(),getData) ;
  clearAdd();
}

const updateData=()=>{
  let obj=toRaw(addForm) as queryObject;
  CategoryHooks.EditCategory(obj,getQueryData(),getData)
}

const input = ref('')
const value2 = ref('')



const options2=[
    {value:'开启',label:'开启',},
    {value:'关闭',label:'关闭',},
    {value:'删除',label:'删除',},
]

//添加
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

//编辑
const dialogForm = ref(false)
const formLabelWidth2 = '140px'
const editList = reactive({
  id:'',
  name: '',
  serial: '',
  state:'',
})
</script>

<template>
<div>
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.name" placeholder="标题关键字" clearable class="inName"/>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" class="searchBtn" @click="search()">查 询</el-button>
               <el-button type="primary" plain @click=" dialogSubmitType = 0; openUpdate($event, 0);">添 加</el-button>              
            </el-form-item>
          </el-form>
        </div>

    <el-table :data="tableData" border style="width: 100%"  table-layout="fixed" class="tableList">
     <el-table-column type="selection" width="55" align="center"/>
     <el-table-column prop="id" label="分类名称" align="center"/>
     <el-table-column prop="name" label="分类名称" align="center"/>
     <el-table-column prop="serial" label="分类编号" align="center"/>
     <el-table-column prop="state" label="状态" align="center"/>
     <el-table-column  label="操作" align="center">
      <template #default="s">
         <el-button type="primary" :icon="Edit" :data-id="s.row.id"  @click="dialogSubmitType = 1;openUpdate($event,1)">编辑</el-button>
        <el-button type="danger" :icon="Delete" :data-id="s.row.id" @click="pubStore.deleteConfirm($event, toDelete)">删除</el-button>
      </template>
       
     </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="24">
        <div class="footer">
         <el-select v-model="value2" class="bulk" clearable placeholder="批量操作" >
             <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>      
              <el-button type="primary" class="searchBtn">确 定</el-button>
              <el-pagination background layout="prev, pager, next"  :page-size="limit" :current-page="currentPage" :total="total" @current-change="pageChange" class="fen"></el-pagination>
        </div>
    </el-col>
  </el-row>
  <!-- 添加模态框 -->
<CategoryDialog ref="noDialog" :title="dialogSubmitType == 0 ? '添加分类' : '修改分类'" :confirm="dialogSubmitType == 0 ? insertData : updateData">
    <template #main>
       <el-form :model="addForm">
      <el-form-item label="分类名称:" :label-width="formLabelWidth">
        <el-input v-model="addForm.name" autocomplete="off" class="addN" placeholder="输入分类名称"/>
      </el-form-item>
      <el-form-item label="分类编码:" :label-width="formLabelWidth">
       <el-input v-model="addForm.serial" autocomplete="off" class="addN" placeholder="输入分类编码"/>
      </el-form-item>
       <el-form-item label="是否启用:" :label-width="formLabelWidth">
        <el-radio-group v-model="addForm.state">
                       <el-radio :label="1">开 启</el-radio>
                       <el-radio :label="2">不开启</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    </template>
    </CategoryDialog>

  

   <!-- 编辑模态框 -->
  <el-dialog v-model="dialogForm" title="编辑分类" width="30%">
    <el-form :model="editList">
      <el-form-item label="分类名称:" :label-width="formLabelWidth2">
        <el-input v-model="editList.name" autocomplete="off" class="addN" placeholder="输入分类名称"/>
      </el-form-item>
      <el-form-item label="分类编码:" :label-width="formLabelWidth2">
       <el-input v-model="editList.serial" autocomplete="off" class="addN" placeholder="输入分类编码"/>
      </el-form-item>
       <el-form-item label="是否启用:" :label-width="formLabelWidth2">
        <el-radio-group v-model="editList.state">
                       <el-radio :label="1">开 启</el-radio>
                       <el-radio :label="2">不开启</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="submit">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>
   
</div>
</template>


<style scoped>
.inName{
    width: 300px;
}
.searchBtn{
    margin-left: 10px;
}
.bulk{
    width: 150px;
}
.footer{
    overflow: hidden;
    margin-top: 20px;
}
.fen{
    float: right;
}
.tableList{
    margin-top: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.addN{
    width: 240px;
}

</style>